<template>
  <el-form :model="evalPlan" class="planForm" ref="form" label-width="110px" :rules="rules">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="任务名称" prop="evalPlanName">
          <el-input v-model="evalPlan.evalPlanName" placeholder="请输入任务名称" />
        </el-form-item>
      </el-col>
      <!-- <el-col :span="12">
        <el-form-item label="考评任务类型" prop="evalPlanType">
          <el-select v-model="evalPlan.evalPlanType" :style="fixedWidth">
            <el-option :value="1" label="常规任务" />
          </el-select>
        </el-form-item>
      </el-col>-->
      <el-col :span="12">
        <el-form-item label="考评任务周期">
          <el-select clearable v-model="evalPlan.evalPlanCycle" :style="fixedWidth">
            <el-option :value="0" label="临时任务" />
            <el-option :value="2" label="周任务" />
            <el-option :value="3" label="月任务" />
            <el-option :value="4" label="季度任务" />
            <el-option :value="5" label="年任务" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="任务执行次数" prop="evalPlanCycleNum">
          <el-input
            :readOnly="evalPlan.evalMode && evalPlan.evalMode !== 2"
            :style="fixedWidth"
            v-model.number="evalPlan.evalPlanCycleNum"
            placeholder="请输入"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="顺延工作日天数">
          <el-input
            type="number"
            min="0"
            :style="fixedWidth"
            v-model="evalPlan.delay"
            placeholder="请输入"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="任务开始时间" prop="startDate">
          <el-date-picker
            type="date"
            :style="fixedWidth"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            v-model="evalPlan.startDate"
            placeholder="请选择"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="任务结束时间">
          <el-date-picker
            type="date"
            :style="fixedWidth"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            v-model="evalPlan.endDate"
            placeholder="请选择"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="考评形式" prop="evalMode">
          <el-select
            clearable
            v-model="evalPlan.evalMode"
            @change="handleModeChange"
            :style="fixedWidth"
          >
            <el-option :value="1" label="填报" />
            <el-option :value="2" label="巡查" />
            <el-option :value="3" label="科室考评" />
            <el-option :value="4" label="自评" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="考评对象" prop="targetMode">
          <el-select clearable v-model="evalPlan.targetMode" :style="fixedWidth">
            <el-option :value="1" label="指定部门" />
            <!-- <el-option :value="2" label="指定岗位" /> -->
            <el-option :value="3" label="指定人员" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="执行责任科室" prop="execDeptId">
          <dept-select
            ref="deptSelect"
            :selectValue="evalPlan.execDeptId"
            @select="handleDeptSelect"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="需要审核">
          <el-radio-group v-model="evalPlan.radio3" size="small">
            <el-radio-button :label="1">是</el-radio-button>
            <el-radio-button :label="0">否</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item
      v-if="type === 'add'"
      label="考评模板"
      prop="evalContent"
      :rules="!templateCheck ? rules.evalContent : []"
    >
      <el-select
        multiple
        :disabled="templateCheck"
        @remove-tag="handleRemoveTag"
        v-model="evalPlan.evalContent"
        class="mr20"
        style="width: 86%"
      >
        <el-option
          v-for="item in formData"
          :key="item.evalSchemeId"
          :value="item.evalSchemeId"
          :label="item.evalSchemeName"
        />
      </el-select>
      <el-checkbox @change="handleTemplateCheck" v-model="templateCheck">自定义</el-checkbox>
    </el-form-item>
  </el-form>
</template>

<script>
import { getEvalSchemeAll } from '@/api/eval'
import DeptSelect from '@/components/DeptSelect'

export default {
  components: {
    DeptSelect
  },
  data() {
    return {
      fixedWidth: {
        width: '246px'
      },
      evalPlan: {
        execDeptId: null,
        evalPlanName: null,
        evalPlanType: 1,
        evalPlanCycle: null,
        evalPlanCycleNum: null,
        evalPlanCycleNum: null,
        delay: null,
        executorMode: null,
        startDate: null,
        endDate: null,
        evalMode: null,
        state: null,
        targetMode: null,
        evalContent: null
      },
      rules: {
        evalPlanName: [{ required: true, message: '请输入考评任务名称', trigger: 'blur' }],
        execDeptId: [{ required: true, message: '请选择执行责任科室', trigger: 'blur' }],
        evalPlanType: [{ required: true, message: '请选择考评任务类型', trigger: 'change' }],
        startDate: [{ required: true, message: '请选择任务开始时间', trigger: 'blur' }],
        evalMode: [{ required: true, message: '请选择考评形式', trigger: 'change' }],
        evalPlanCycleNum: [
          { required: true, message: '请输入执行次数', trigger: 'blur' },
          { type: 'number', message: '请输入一个数字' }
        ],
        evalContent: [{ required: true, message: '请选择考评模板', trigger: 'blur' }],
        targetMode: [{ required: true, message: '请选择一个考评对象', trigger: 'blur' }]
      },
      saveSecondArr: [],
      formData: [],
      templateCheck: false,
      type: this.$route.params.type
    }
  },
  computed: {
    getEndDate() {
      return this.evalPlan.endDate
    },
    getStartDate() {
      return this.evalPlan.startDate
    },
    getTargetMode() {
      return this.evalPlan.targetMode
    },
    getEvalMode() {
      return this.evalPlan.evalMode
    }
  },
  watch: {
    getEndDate: {
      handler(n, o) {
        if (n !== o && n) {
          const startDate = new Date(this.evalPlan.startDate).getTime()
          const endDate = new Date(this.evalPlan.endDate).getTime()
          if (endDate - startDate < 0) {
            this.$message.error('结束时间不能小于开始时间')
            this.$set(this.evalPlan, 'endDate', null)
          }
        }
      },
      deep: true
    },
    getStartDate: {
      handler(n, o) {
        if (n !== o && n) {
          if (this.evalPlan.endDate) {
            const startDate = new Date(this.evalPlan.startDate).getTime()
            const endDate = new Date(this.evalPlan.endDate).getTime()
            if (startDate - endDate > 0) {
              this.$message.error('开始时间不能大于结束时间')
              this.$set(this.evalPlan, 'startDate', null)
            }
          }
        }
      },
      deep: true
    },
    getTargetMode: {
      handler(n, o) {
        if (n && n !== o) {
          this.$emit('targetMode', n)
        }
      },
      deep: true
    },
    getEvalMode: {
      handler(n, o) {
        if (n && n !== o) {
          this.$emit('evalMode', n)
        }
      },
      deep: true
    }
  },
  async mounted() {
    const res = await getEvalSchemeAll()
    if (res && res.data.length > 0) {
      this.formData = res.data
    }
  },
  methods: {
    handleModeChange(val) {
      console.log('val', val)
      // 除移动巡查外，执行次数都为1
      if (val !== 2) {
        this.$set(this.evalPlan, 'evalPlanCycleNum', 1)
      } else {
        this.$set(this.evalPlan, 'evalPlanCycleNum', null)
      }

      if (val === 3) {
        this.$set(this.evalPlan, 'targetMode', 1)
      } else {
        this.$set(this.evalPlan, 'targetMode', null)
      }
    },
    handleDeptSelect(value) {
      console.log('value', value)

      this.$set(this.evalPlan, 'execDeptId', value.id)
    },
    // 第二步到第一步，改变数据时，传递第二步的 toData 数据给 第一步的表单暂存起来
    saveArr(arr) {
      this.saveSecondArr = [...arr]
    },
    setObj(obj) {
      this.evalPlan = Object.assign({}, obj)
    },
    postData() {
      this.$refs.form.validate(valid => {
        if (valid) {
          let data = []
          let arr = []
          if (this.type === 'add') {
            if (!this.templateCheck) {
              this.formData.map(v => {
                this.evalPlan.evalContent.map(j => {
                  if (v.evalSchemeId === j) {
                    // 添加一个parentId 属性，remove-tag事件时比对id进行操作
                    v.evalSchemeDetailedList.map(a => {
                      a.parentId = v.evalSchemeId
                    })
                    console.log('evalSchemeDetailedList', v.evalSchemeDetailedList)
                    arr = [...arr, ...v.evalSchemeDetailedList]
                  }
                })
              })
              arr.map(v => {
                v.key = v.evalItemId
                v.label = v.evalItemName
              })
              /*
                开始没选模板，toData 有值，上一步保存值。 
                  1.选择模板，模板与toData 合并 ...this.saveSecondArr
                  2.不选模板，继续显示
                选了模板， toData 有值，上一步保存值
                  1.模板不变，这里数据应该不变避免重复
                  2.点自定义，模板值清空
              */
              //  let saveArr = []
              // this.saveSecondArr.map(v => {
              //   arr.map(j => {
              //     if (v.key === j.key) {
              //     }
              //   })
              // })
              data = new Set([...arr, ...this.saveSecondArr])
            } else {
              // 不选模板的情况
              data = new Set([...this.saveSecondArr])
            }
          } else {
            // 编辑模式下不能选择考评模板，直接赋空数组
            data = []
          }
          this.$emit('listData', data)
          this.$emit('postData', true, this.evalPlan, 1)
          return false
        }
        this.$emit('notSubmit', 1)
      })
    },
    handleTemplateCheck(e) {
      console.log('template e', e)
      if (e) {
        if (this.saveSecondArr.length > 0) {
          // 勾选上的时候删除掉所有的有parentId的项
          this.saveSecondArr.map((v, i) => {
            if (v.parentId) {
              this.saveSecondArr.splice(i, 1)
            }
          })
        }
      }
    },
    handleRemoveTag(tag) {
      console.log('tag', tag)
      this.saveSecondArr.map((v, i) => {
        if (v.parentId === tag) {
          this.saveSecondArr.splice(i, 1)
        }
      })
    }
  }
}
</script>
